<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a1 {
            width: 100px;
            height: 100px;
            background: pink;
            border-radius: 10px;
        }

        .a2 {
            width: 100px;
            height: 100px;
            background: pink;
            border-radius: 50%;
        }

        .a3 {
            width: 100px;
            height: 100px;
            background: pink;
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;

        }

        .a4 {
            width: 100px;
            height: 100px;
            background: pink;
            border-radius: 50%;
            border-top-right-radius: 0;
        }

        .a5 {
            width: 100px;
            height: 100px;
            background: pink;
            border-bottom-left-radius: 50%;
        }

        .a6 {
            width: 200px;
            height: 100px;
            background: pink;
            border-radius: 50%;
        }

        .a7 {
            display: inline-block;
            border-radius: 50%;
            border-top: 50px solid yellow;
            border-left: 50px solid black;
            border-right: 50px solid transparent;
            border-bottom: 50px solid black;

        }

        .a8 {
            display: inline-block;
            border-radius: 50%;
            border: 50px solid;
            border-color: yellow transparent red transparent;

        }

        .taiji {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: #000;
            border-radius: 50%;
            border: 1px solid;
            overflow: hidden;
            z-index: 1;
            animation:circling 1s linear 0s infinite;
        }
        .t {

            position: absolute;
            top: 0;
            left: 150px;
            width: 150px;
            height: 300px;
            background: #fff;
            z-index: 2;
        }
        .w {
            position: relative;
            margin: 0 auto;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #ffffff;
            border: 50px solid #000;
            z-index: 4;
        }

        .b {
            position: relative;
            margin: 0 auto;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #000;
            border: 50px solid #fff;
            z-index: 4;
        }

        @keyframes circling{
            from{
                transform:rotate(360deg);
            }
            to{
                transform:rotate(0deg);
            }
        }

    </style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
<div class="a6"></div>
<div class="a7"></div>
<div class="a8"></div>
<div class="taiji">
    <div class="t"></div>
    <div class="w"></div>
    <div class="b"></div>
</div>
</body>
</html>